<template>
    <el-form :inline="true" :model="studentForm" class="demo-form-inline routerview" label-width="auto">
        <el-form-item label="学号：">
            <el-input ref="flr" v-model="studentForm.Sid" placeholder="请输入学号(不填代表所有)"></el-input>
        </el-form-item>
        <el-form-item label="专业：">
            <el-select @click.native="loaddept()" v-model="studentForm.dept">
                <el-option label="All" value="" ></el-option>
                <el-option v-for="dept in depts" :key="dept" :value="dept"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="宿舍号：">
            <el-select @click.native="loaddorid()" v-model="studentForm.dorid">
                <el-option label="All" value="" ></el-option>
                <el-option v-for="dorid in dorids" :key="dorid" :value="dorid"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-checkbox v-model="studentForm.checked">仅显示未在寝室的同学</el-checkbox>
        </el-form-item>
        <el-form-item style="margin-left:50px">
            <el-button @click="deleteAll" type="danger">移除全部</el-button>
        </el-form-item>
        <el-table
            :data="Students"
            style="width: 100%"
            max-height="auto">
            <el-table-column
            fixed
            prop="sid"
            label="学号"
            >
            </el-table-column>
            <el-table-column
            prop="name"
            label="姓名"
            >
            </el-table-column>
            <el-table-column
            prop="sex"
            label="性别"
            style="width: 60%"
            >
            </el-table-column>
            <el-table-column
            prop="dept"
            label="专业"
            >
            </el-table-column>
            <el-table-column
            prop="dorid"
            label="宿舍号"
            >
            </el-table-column>
            <el-table-column
            label="是否到寝"
            >
            <template slot-scope="scope">
                <h4 :class="scope.row.ishome ? 'green':'red'">{{scope.row.ishome ? '是':'否'}}</h4>
            </template>
            </el-table-column>
            <el-table-column
            prop="phone"
            label="电话"
            >
            </el-table-column>
            <el-table-column
            prop="email"
            label="邮箱"
            >
            </el-table-column>
            <el-table-column
            prop="right"
            label="操作"
            >
            <template slot-scope="scope">
                <el-button
                @click.native.prevent="updataRow(scope.row)"
                type="primary"
                size="small">
                修改
                </el-button>
                <el-button
                @click.native.prevent="deleteRow(scope.row)"
                type="danger"
                size="small">
                移除
                </el-button>
            </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :page-size="studentForm.pagesize"
            :total="total"
            :current-page="currentPage"
            @current-change="pagechange"
        >
        </el-pagination>
    </el-form>
</template>

<script>
export default {
    name:'Studentmannager',
    data() {
        return {
            studentForm:{
                Sid:'', 
                dept:'',
                dorid:'',
                checked:false,
                pagesize:6,
                page:1
            },
            building:'',
            floor:'',
            Students:[],
            dorids:[],
            depts:[],
            total:0,
            currentPage:1
        }
    },
    methods:{
        loaddept(){
            let _this = this
            axios.get('http://localhost:8081/student/getUsefulDorid').then(function(resp){
                _this.dorids = resp.data
            })
        },
        loaddorid(){
            let _this = this
            axios.get('http://localhost:8081/student/getUsefulDept').then(function(resp){
                _this.depts = resp.data
            })
        },
        reload(){
            let _this = this
            axios.get(`http://localhost:8081/student/getStudent/${JSON.parse(localStorage.getItem('homemaster')).sex}`,{params:_this.studentForm}).then(function(resp){
                _this.Students = resp.data.records
                _this.total = resp.data.total
            })
        },
        onSubmit(){
            this.studentForm.page = 1
            this.reload()
        },
        deleteRow(row){
            let _this = this
            axios.get(`http://localhost:8081/student/deleteOneStu/${row.sid}`).then(function(){
                _this.reload();
            })
        },
        deleteAll(){
            const _this = this 
            this.$confirm('是否删除页面中展示的所有学生信息？', '确认删除', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type:'warning'
            })
            .then(() => {
                axios.delete(`http://localhost:8081/student/deleteStudents/${JSON.parse(localStorage.getItem('homemaster')).sex}`,{params:_this.studentForm}).then(function(resp){
                    _this.$message({
                        type: 'success',
                        message: '删除成功'
                    });
                    _this.reload();
                }).catch(err=>{
                    console.log(err);
                    _this.$message({
                        type: 'error',
                        message: '删除失败，请稍后重试'
                    });
                })
            })
            .catch(() => {
                _this.$message({
                type: 'info',
                message:'放弃'
                })
            });
        },
        updataRow(row){
            this.$router.push(`/editstudent?sid=${row.sid}&building=${row.dorid.split("#")[0]}&room=${row.dorid.split("#")[1]}`)
        },
        pagechange(currentPage){
            this.studentForm.page = currentPage
            this.reload();
        }
    },
    mounted(){
        this.loaddept();
        this.loaddorid();
        this.reload();
    },
    watch:{
        "studentForm.dorid"(){
            this.onSubmit()
        },
        "studentForm.dept"(){
            this.onSubmit()
        },
        "studentForm.Sid"(){
            this.onSubmit()
        },
        "studentForm.checked"(){
            this.onSubmit()
        }
    }
}
</script>

<style scoped>
    .el-form{
        text-align: center;
    }
    .red{
        color: red;
    }
    .green{
        color: green;
    }
    .el-button{
        margin-left: 0;
        margin-right: 10px;
    }
    .routerView{
        padding: 20px;
        border-radius: 5px;
        position: relative;
        background-color: #fff;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        box-shadow: 3px 3px 6px 2px rgba(0, 0, 0, 0.5);
    }
</style>